<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>新增页面</title>
  <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
  <link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
</head>
<body>

<form class="layui-form" action="">

  <div class="mainBox">
    <div class="main-container mr-5">

      <div class="layui-form-item">
        <label class="layui-form-label required">文件</label>
        <div class="layui-input-block">
          <input type="text" style="display:none" name="url"  value="" />
          <button type="button" class="pear-btn pear-btn-primary pear-btn-sm" id="url" >
            <i class="layui-icon layui-icon-upload"></i>上传文件
          </button>
          <div class="layui-upload-list layui-hide">
            <table class="layui-table">
              <colgroup>
                <col>
                <col>
                <col width="150">
                <col width="260">
                <col width="150">
              </colgroup>
              <thead>
              <tr>
                <th>文件名</th>
                <th>文件路径</th>
                <th>大小</th>
                <th>上传进度</th>
                <th>操作</th>
              </tr></thead>
              <tbody id="attachment-list-files"></tbody>
            </table>
          </div>
          <button type="button" class="pear-btn pear-btn-primary pear-btn-sm layui-hide" id="attachment-play-files" >
            <i class="layui-icon layui-icon-play"></i>开始上传
          </button>
          <div class="layui-upload-list" id="filefiles"></div>
          <div class="layui-form-item"><div class="layui-form-mid layui-word-aux">支持多选批量上传</div></div>

        </div>

      </div>

    </div>
  </div>

</form>

<script src="/app/admin/component/layui/layui.js"></script>
<script src="/app/admin/component/pear/pear.js"></script>
<script src="/app/admin/admin/js/permission.js"></script>
<script>

  // 字段 文件 url
  layui.use(["upload", "element", "layer", "popup", "util"], function() {
    let input = layui.$("#url").prev();
    input.prev().html(layui.util.escape(input.val()));

    var uploadFile = layui.upload.render({
      elem: "#url",
      elemList: layui.$('#attachment-list-files'),
      auto: false,
      bindAction: '#attachment-play-files',
      data: {pid: "<?php echo $pid; ?>"},
      multiple: "true",
      accept: "file",
      url: "/app/netdisk/admin/io-source/upload",
      field: "__file__",
      choose: function(obj){
        console.log(layui.$("#url").closest("div").find(".layui-upload-list"));
        layui.$("#url").closest("div").find(".layui-upload-list").eq(0).removeClass('layui-hide');
        var that = this;
        var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
        //读取本地文件
        obj.preview(function(index, file, result){
          layui.$('#attachment-play-files').removeClass('layui-hide');
          var tr = layui.$(['<tr id="upload-'+ index +'">'
            ,'<td>'+ file.name +'</td>'
            ,'<td class="upload-path"></td>'
            ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
            ,'<td><div class="layui-progress" lay-filter="progress-demo-'+ index +'" lay-showPercent="yes"><div class="layui-progress-bar" lay-percent="1%"></div></div></td>'
            ,'<td>'
            ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
            ,'</td>'
            ,'</tr>'].join(''));

          //删除
          tr.find('.demo-delete').on('click', function(){
            delete files[index]; //删除对应的文件
            tr.remove();
            uploadFile.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
          });
          that.elemList.append(tr);
          layui.element.render('progress'); //渲染新加的进度条组件
        });
      },
      done: function (res, index) {
        if (res.code){
          return parent.layui.popup.failure(res.msg);
        }
        var that = this;

        var tr = that.elemList.find('tr#upload-'+ index)
                ,tds = tr.children();
        tds.eq(4).html(''); //清空操作
        delete this.files[index]; //删除文件队列已经上传成功的文件

        layui.$('#upload-'+index).find('.upload-path').html(layui.util.escape(res.data.url));
        var data = res.data;

        return;
      },
      allDone: function(obj){
        //全部上传完成
        parent.refreshTable();
        parent.layer.close(parent.layer.getFrameIndex(window.name));
        layui.$('#attachment-play-files').addClass('layui-hide');
      },
      progress: function(n, elem, e, index){
        layui.element.progress('progress-demo-'+ index, n + '%'); //执行进度条。n 即为返回的进度百分比
      }
    });

  });


</script>

</body>
</html>
